<template>
  <div>
    <table-title tableTitle="管理员列表"></table-title>
    <el-table border stripe class="adminTable" :data="adminList">
      <el-table-column label="用户名" prop="userName"></el-table-column>
      <el-table-column label="姓名" prop="turename"></el-table-column>
      <el-table-column label="权限">
        <template slot-scope="scope">
          <div>
            {{ scope.row.power == '1' ? '系统管理员' : '课程管理员' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="注册日期">
        <template slot-scope="scope">
          <div>
            {{ new Date(scope.row.createAt).toLocaleString() }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-link
              @click="edit(scope.row)"
              style="margin:0 10px;"
              type="primary"
              >编辑</el-link
            >
            <el-link type="danger" @click="del(scope.row.tokenId)"
              >删除</el-link
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="page_wrap">
      <el-pagination
        page-size="3"
        @current-change="pageChange"
        background
        layout="prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tableTitle from '../../components/tableTitle.vue'
import { _delAdmin } from '../../api/admin'
export default {
  props: {
    adminList: {
      type: Array,
      default () {
        return []
      }
    },
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    // 分页改变
    pageChange (val) {
      this.$parent.pageStart = val
      this.$parent.getAdmin()
    },
    edit (row) {
      //编辑方法
      this.$parent.diaFlag = true //打开弹出层
      // 传递当前行数据给兄弟组价form
      this.$bus.$emit('sendRow', row)
    },
    async del (id) {
      // 删除管理员
      let res = await _delAdmin(id)
      if (res.success) {
        this.$message.success('删除成功')
        // 删除成功 重新获取列表
        this.$parent.getAdmin()
      }
    }
  },
  components: {
    tableTitle
  }
}
</script>
<style lang="less" scoped>
.adminTable {
  width: 80%;
  margin: 0 auto;
}
.page_wrap {
  width: 80%;
  margin: 10px auto;
}
</style>
